import React, { useState } from 'react';
import {
	Stack,
	FormControl,
	FormHelperText,
	InputGroup,
	InputLeftAddon,
	Input,
	Button,
	Text,
	Container,
	Flex,
	Divider,
	Center,
	Box,
	Checkbox,
  useToast,
  Spinner,
} from '@chakra-ui/react';
import { FaMailBulk, FaLock, FaCheck, FaWeixin, FaQq } from 'react-icons/fa';
import { useFormik } from 'formik';
import axios from 'axios'

const SignIn = () => {
  const toast = useToast();

  const [loading, setLoading] = useState(false)
  const [errors, setError] = useState({})

	const postSignIn = function(req) {
    if (loading) return;
    setLoading(true)

		axios
			.post('https://conduit.productionready.io/api/users/login', { user: req })
			.then((res) => {
        setError({})
				toast({
          status: 'success',
          title: '登录成功',
          duration: 3000
        });
			})
			.catch((err) => {
        const errors = err.response.data.errors
        if (errors) {
          setError(errors)
        }
        toast({
          status: 'error',
          title: '登录失败',
          duration: 3000
        });
			}).finally(() => {
        setLoading(false)
      });
	};

	const formik = useFormik({
		initialValues: {
			username: '',
			password: ''
		},
		onSubmit: (values) => {
			postSignIn(values);
		}
	});

	return (
    <>
    {loading ?
    <Center><Spinner
      thickness='4px'
      speed='0.65s'
      emptyColor='gray.200'
      color='blue.500'
      size='xl'
    /></Center>
    :
		<Stack spacing={4} pb="30px">
			<FormControl>
				<InputGroup borderRadius={0}>
							<InputLeftAddon children={<FaMailBulk />} />
							<Input
								placeholder="请输入邮箱"
								name="email"
								value={formik.values.email}
								onChange={formik.handleChange}
							/>
						</InputGroup>
            {errors.email ? <FormHelperText color="red.400">{errors.email[0]}</FormHelperText> : null}
						<InputGroup>
							<InputLeftAddon children={<FaLock />} />
							<Input
								type="password"
								placeholder="请输入密码"
								name="password"
								value={formik.values.password}
								onChange={formik.handleChange}
							/>
						</InputGroup>
						{/* <FormHelperText color="red.400">密码格式不正确</FormHelperText> */}
            {errors.password ? <FormHelperText color="red.400">{errors.password[0]}</FormHelperText> : null}
			</FormControl>
			<Flex justifyContent="space-between">
				<Checkbox defaultChecked>记住我</Checkbox>
				<Text>登录遇到问题?</Text>
			</Flex>
			<Button borderRadius="full" onClick={formik.handleSubmit}>登录</Button>
			<Center>
				<Divider />
				<Text wordBreak="keep-all" px={2} fontSize="14px">
					社交账号登录
				</Text>
				<Divider />
			</Center>
			<Center>
				<Box mx={4} color="green.400">
					<FaWeixin
						style={{
							width: '30px',
							height: '30px'
						}}
					/>
				</Box>
				<Box mx={4} color="blue.400">
					<FaQq
						style={{
							width: '30px',
							height: '30px'
						}}
					/>
				</Box>
			</Center>
		</Stack>
    }
    </>
	);
};

export default SignIn;
